<template>
  <div class="wrapper">

    <div class="header">
      <div style="align-items: center;">
        <h2>一起参与讨论吧!</h2>
      </div>

      <!-- 搜索框 -->
      <div class="search-section">
        <el-input v-model="searchKeyword" placeholder="请输入搜索关键字" clearable @clear="resetSearch" width="50px"></el-input>
        <el-button type="primary" @click="searchTopics">搜索</el-button>
      </div>

    </div>
    <div style="height: 77px"></div>
    <div class="topic-list">
      <el-card v-for="topic in topics" :key="topic.id" class="topic-card">
        <h3>{{ topic.title }}</h3>
        <p>{{ topic.content }}</p>
        <div class="topic-info">
          <span>{{ topic.realName }}——</span>
          <span>{{ topic.createdTime }}</span>
        </div>
        <el-button type="primary" @click="viewComments(topic.id)">查看评论</el-button>
      </el-card>
      <p v-if="topics.length === 0" style="text-align: center;">没有符合条件的主题。</p>
    </div>

    <div class="add-topic-section">
      <h3>添加新主题</h3>
      <el-form :model="newTopic" class="new-topic-form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="newTopic.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="newTopic.content" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addTopic">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 14.2vw"></div>

    <Footer />


  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { ref, onMounted, computed } from 'vue';
import { ElCard, ElButton, ElForm, ElFormItem, ElInput } from 'element-plus';
import Footer from '@/components/Footer.vue';
import axios from "../plugin/axiosInstance";
import { useRouter } from "vue-router";

export default {
  components: {
    ElCard,
    ElButton,
    ElForm,
    ElFormItem,
    ElInput,
    Footer,
  },
  setup() {
    const topics = ref([]);
    const newTopic = ref({
      title: '',
      content: '',
    });
    const searchKeyword = ref('');
    const router = useRouter();

    const viewComments = (topicId) => {
      router.push({ name: 'commentList', query: { topicId: topicId } });
    };

    const getTopics = async () => {
      try {
        const response = await axios.get('/reply/getTopic');
        topics.value = response.data.data;
      } catch (error) {
        console.error('获取主题失败:', error);
      }
    };

    const addTopic = async () => {
      try {
        const response = await axios.post('/reply/addTopic', {
          title: newTopic.value.title,
          content: newTopic.value.content,
        });
        ElMessage({
          type: 'success',
          message: '主题添加成功',
          customClass: 'my-message'
        })
        newTopic.value.title = '';
        newTopic.value.content = '';
        setTimeout(() => {
          searchTopics(); // 刷新主题列表
        }, 1000);

      } catch (error) {
        console.error('添加主题失败:', error);
      }
    };

    /* const filteredTopics = computed(() => {
      if (!searchKeyword.value.trim()) {
        return topics.value;
      } else {
        const keyword = searchKeyword.value.trim().toLowerCase();
        return topics.value.filter(topic =>
            topic.title.toLowerCase().includes(keyword) ||
            topic.content.toLowerCase().includes(keyword)
        );
      }
    }); */

    //搜索话题讨论


    const searchTopics = async () => {
      console.log(searchKeyword.value);
      try {
        const response = await axios.get(`/reply/getTopic?searchKeyword=${searchKeyword.value}`);
        topics.value = response.data.data;
      } catch (error) {
        console.error('获取主题失败:', error);
      }
    };


    const resetSearch = () => {
      searchKeyword.value = '';
    };

    onMounted(() => {
      //getTopics();
      searchTopics();
    });

    return {
      topics,
      newTopic,
      searchKeyword,
      //filteredTopics,
      viewComments,
      addTopic,
      searchTopics,
      resetSearch,
    };
  },
};
</script>

<style scoped>
.wrapper {}

h2 {
  text-align: center;
}

.topic-list {
  padding: 10px;
}

.topic-card {
  margin-bottom: 10px;
}

.topic-info {
  font-size: 12px;
  color: #666;
}

.add-topic-section {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  min-height: 150px;
  /* 设置最小高度，确保按钮始终可见 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.new-topic-form {
  max-width: 400px;
  margin: auto;
}

.new-topic-form .el-form-item {
  margin-bottom: 15px;
}

.search-section {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.search-section .el-input {
  flex: 1;
  margin-right: 10px;
}

.header {
  position: fixed;
  height: 10%;
  width: 100%;
  background-color: #fff;
}
</style>
